<template>
  <el-dialog
    v-model="visible"
    width="775px"
    append-to-body
    :show-close="false"
    :destroy-on-close="true"
    modal-class="cell-rich-editor"
    @closed="closed">
    <RichEditor v-model="text"></RichEditor>
  </el-dialog>
  <div class="handle" @click="open"> {{ text && fiterLabelHandle(text).substr(0, 100)}} </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import RichEditor from './RichEditor.vue'

const fiterLabelHandle = (str: any) =>{
  str = str.replace(/(\n)/g, ""); // 去掉换行
  str = str.replace(/(\t)/g, ""); // 去掉换行
  str = str.replace(/(\r)/g, "");
  str = str.replace(/<\/?[^>]*>/g, ""); // 去掉标签
  str = str.replace(/\s*/g, "");
  str = str.replace(/ /ig, " "); // 去掉 
  return str
}

const text = defineModel()
const visible = ref(false)
const emit = defineEmits(['leave'])
const open = () => {
  visible.value = true
}
const closed = () => {
  visible.value = false
  emit('leave')
}
</script>

<style scoped lang="scss">
.handle {
  width: 100%;
  cursor: pointer;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 32px;
  line-height: 30px;
  border: 1px solid #fff;
  border-radius: var(--el-border-radius-base);
  &:hover{
    border: 1px solid var(--el-color-primary);
  }
}
</style>

<style lang="scss">
.cell-rich-editor {
  .el-dialog{
    --el-dialog-padding-primary: 13px !important;
    border-radius: var(--el-border-radius-base) !important;
    padding: 0;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .el-dialog__header{
    display: none;
  }
}
</style>